<template>
    <div class="sign-up-group">
        <div class="sign-title">参展报名</div>
        <div class="group">
            <div class="title"><span class="mast-icon" v-show="modelList.name_cn.request">*</span>联系人:</div>
            <el-input v-model="modelList.name_cn.value" placeholder="请输入联系人"></el-input>
        </div>
        <div class="group">
            <div class="title"><span class="mast-icon" v-show="modelList.person_mobile.request">*</span>联系电话:</div>
            <el-input v-model="modelList.person_mobile.value" placeholder="请输入联系电话"></el-input>
        </div>
        <div class="group">
            <div class="title"><span class="mast-icon" v-show="modelList.email.request">*</span>email:</div>
            <el-input v-model="modelList.email.value" placeholder="请输入email"></el-input>
        </div>
        <div class="group">
            <div class="title"><span class="mast-icon" v-show="modelList.company_name.request">*</span>公司名称:</div>
            <el-input v-model="modelList.company_name.value" placeholder="请输入公司名称"></el-input>
        </div>
        <div class="group">
            <div class="title"><span class="mast-icon" v-show="modelList.product_brand.request">*</span>品牌:</div>
            <el-input v-model="modelList.product_brand.value" placeholder="请输入品牌"></el-input>
        </div>
        <div class="group">
            <div class="title"><span class="mast-icon" v-show="modelList.area.request">*</span>地区:</div>
            <el-input v-model="modelList.area.value" placeholder="请输入地区"></el-input>
        </div>
        <div class="group">
            <div class="title"><span class="mast-icon" v-show="modelList.position_area.request">*</span>需求面积:</div>
            <el-input v-model="modelList.position_area.value" placeholder="请输入需求面积"></el-input>
        </div>
        <div class="benzhu">备注:</div>
        <div class="infos">1.此处为参展咨询处，请完整填写信息，我们将尽快与您联系！</div>
        <div class="infos"> 2.此处非观众登记处，请知悉！</div>
        <div class="button-group">
            <div class="button-group-but1" @click="editAjaxMethod">提交申请</div>
        </div>
    </div>
</template>
<script>
import { Toast} from "vant";
import { Input} from "element-ui";
export default {
    props:['callback'],
    name: 'IDReady',
    components: {
    [Input.name]: Input,
  },
    data() {
        return {
            modelList: {
                name_cn: { value: '', request: true, name: '姓名', placeholder: '请输入联系人', type: 'input' },
                person_mobile: { value: '', request: true, name: '电话', placeholder: '请输入电话', type: 'input' },
                email: { value: "", request: true, name: 'email', placeholder: '请输入email', type: 'input' },
                company_name: { value: '', request: true, name: '公司名称', placeholder: '请输入公司名称', type: 'input' },
                product_brand: { value: '', request: true, name: '品牌', placeholder: '请输入品牌', type: 'input' },
                area: { value: '', request: true, name: '地区', placeholder: '请输入地区', type: 'input' },
                position_area: { value: '', request: true, name: '需求面积', placeholder: '请输入需求面积', type: 'input' },
            },
        };
    },
    created() {
        
    },
    methods: {
        editAjaxMethod() {
            //验证
            let test = this.testMethod();
            if (!test.flag) {
                Toast.fail(test.msg);
                return false;
            }
            Toast.loading({ message: "加载中...", forbidClick: true });
            this.$http
                .post(this.$API.HOME_GET_SINGUP, test.data)
                .then((res) => {
                console.log('首页内容',res)
                Toast.clear();
                if (res.code == 1) {
                    Toast.success('提交成功');
                    if(typeof this.callback=='function'){
                        this.callback()
                    }
                } else {
                    Toast.fail(res.msg);
                }
                })
                .catch((err) => {
                    Toast.clear();
                    Toast.fail(JSON.stringify(err));
                });
            },
        //验证方法
            testMethod() {
                let flag = true,
                    msg = '',
                    data = {};
                for (let i in this.modelList) {
                    if (this.modelList[i].request) {
                        if (!this.modelList[i].value || this.modelList[i].value == '') {
                            flag = false;
                            msg = this.modelList[i].placeholder;
                            break;
                        }
                    }
                }
                console.log('this.modelList', this.modelList)
                if (flag) {
                    data = {
                        name_cn:this.modelList.name_cn.value,
                        person_mobile:this.modelList.person_mobile.value,
                        email:this.modelList.email.value,
                        company_name:this.modelList.company_name.value,
                        product_brand:this.modelList.product_brand.value,
                        area:this.modelList.area.value,
                        position_area:this.modelList.position_area.value
                    };
                    if (this.type == 2) {
                        data.id = this.id;
                    }
                }
                return {flag: flag, data: data, msg: msg}
            }
    }
};
</script>

<style scoped>
    .sign-up-group{
        padding:20px 30px;
    }
    .sign-up-group .sign-title{
        padding:10px;
        text-align: center;
        font-size:16px;
        font-weight: bold;
    }
    .sign-up-group .group{
        margin-bottom:10px;
    }
    .sign-up-group .title{
        font-size:14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        padding:4px 0 ;
    }
    .sign-up-group .mast-icon{
        margin-right: 8px;
        color:red;
        font-size: 18px;
        margin-top:8px;
    }
    .sign-up-group .benzhu{
        font-size:14px;
        color:#888;
    }
    .sign-up-group .infos{
        padding-left:30px;
        font-size: 12px;
        color:#888;
    }
    .sign-up-group .button-group{
        padding:20px;
        display: flex;
        justify-content: center;
    }
    .sign-up-group .button-group-but1{
        padding:8px 20px;
        font-size:14px;
        color:#ffff;
        background: #CC0A15;
        border-radius: 4px;
        cursor: pointer;
    }
    .sign-up-group .button-group-but1:hover{
        transform: scale(1.02,1.02);
    }
</style>
